<script>
import { mapGetters } from 'vuex'

export default {
  name: 'menu-nav',
  computed: {
    ...mapGetters(['isSidebarMenuCollapsed', 'sidebarNavs', 'config', 'selectedNavKeys']),
  },
  props: {
    mode: {
      type: String,
      default: 'inline',
    },
  },
  data () {
    return {
    }
  },
  methods: {
    onNavClick (e) {
      const { key } = e
      this.$router.push(key)
      this.$store.commit('setSelectedNavKeys', [key])
    },
    // onNavSelect (e) {
    //   const { key } = e
    //   this.$router.push(key)
    // },
  },
  // jsx渲染nav
  render (h) {
    const renderNav = (menu = []) => {
      return menu.map(nav => {
        if (nav.children) {
          return (
            <a-sub-menu>
              <span slot="title">
                {nav.icon && <a-icon type={nav.icon}></a-icon>}
                <span>{nav.name}</span>
              </span>
              {
                renderNav(nav.children)
              }
            </a-sub-menu>
          )
        } else {
          return (
            <a-menu-item key={nav.url} title={nav.name}>
              {nav.icon && <a-icon type={nav.icon}></a-icon>}
              <span>{nav.name}</span>
            </a-menu-item>
          )
        }
      })
    }
    // 非inline不能加inline-collapsed属性，否则渲染错误
    return (
      this.mode === 'inline' ? (
        <div style="width: 100%; height: 100%; overflow: hidden;">
          <a-menu mode={this.mode} theme={this.config.theme} onClick={this.onNavClick} inline-collapsed={this.isSidebarMenuCollapsed} style="height: 100%;" selectedKeys={this.selectedNavKeys}>
            {
              renderNav(this.sidebarNavs)
            }
          </a-menu>
        </div>
      ) : (
        <div style="width: 100%; height: 100%; overflow: hidden;">
          <a-menu mode={this.mode} theme={this.config.theme} onClick={this.onNavClick} style="height: 100%;" selectedKeys={this.selectedNavKeys}>
            {
              renderNav(this.sidebarNavs)
            }
          </a-menu>
        </div>
      )
    )
  }
}
</script>
